<template>
    <div>
        <el-button @click="handlePrint(status)">套 打</el-button>
        <el-button @click="handleNewPrint(status)">打 印</el-button>
        <div v-if="fromPage==='zc'" style="display: inline">
            <el-button @click="dealiceound" v-if="power('TALLY_WORK_UNLOADPLAN:CLOSE')"
                       :disabled="!(status==='ONE'||status==='FOUR')">外理封航
            </el-button>
        </div>
        <div v-else style="display: inline">
            <el-button @click="dealiceound" v-if="power('TALLY_WORK_UPLOADPLAN:CLOSE')"
                       :disabled="!(status==='ONE'||status==='FOUR')">外理封航
            </el-button>
        </div>
        <el-form :inline="true" :model="form" class="detail-form" label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船名：">
                        {{ form.shipName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：">
                        {{ form.voyage }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="港口：">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="完成日期：">
                        {{ form.taskTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="报告日期：">
                        {{ form.taskTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="理箱作业TEU：">
                        {{ form.tallyTeu }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" v-if="un">
                    <el-form-item label="港装TEU：">
                        {{ form.portTeu }}
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="un">
                    <el-form-item label="厂装TEU：">
                        {{ form.factoryTeu }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="残损TEU：">
                        {{ form.damagedTeu }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row class="mt-10" type="flex" justify="space-between">
            <el-table :data="shipAgent" show-summary :summary-method="getSummary" border stripe max-height="500">
                <el-table-column prop="shipAgentName" label="船代"  min-width="80"></el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="ef" label="空重"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.ef | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
                <el-table-column prop="cargoCount" label="箱数"  min-width="80"></el-table-column>
            </el-table>
            <el-table class="ml-20" :data="tradeType" show-summary :summary-method="getSummary" border stripe
                      max-height="500">
                <el-table-column prop="tradeType" label="内外贸"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="ef" label="空重"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.ef | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
                <el-table-column prop="cargoCount" label="箱数"  min-width="80"></el-table-column>
            </el-table>

        </el-row>
        <el-row class="mt-10" type="flex" justify="space-between">
            <el-table :data="transfer" show-summary :summary-method="getSummary" border stripe
                      max-height="500">
                <el-table-column prop="change" label="中转"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.change | _filterIsChange }}
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="ef" label="空重"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.ef | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
                <el-table-column prop="cargoCount" label="箱数"  min-width="80"></el-table-column>
            </el-table>
            <el-table v-if="un" class="ml-20" :data="enchaseWay" show-summary :summary-method="getSummary" border stripe
                      max-height="500">
                <el-table-column prop="enchaseWay" label="装箱"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.enchaseWay | _filterEnchaseWayType }}
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="ef" label="空重"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.ef | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
                <el-table-column prop="cargoCount" label="箱数"  min-width="80"></el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
    import {
        shipPlanTradeTypeReport,
        shipPlanTransferReport,
        shipPlanShipAgentReport,
        shipPlanEnchaseWay,
        shipPlanSummary
    } from "@/api/shipPlan/shipPlan";

    export default {
        name: "total",
        props: {
            un: {
                type: Boolean,
                default: true,
            },
            status: {},
            fromPage: {
                default: 'zc'
            }
        },
        data() {
            return {
                shipAgent: [],
                tradeType: [],
                transfer: [],
                enchaseWay: [],
                form: {},
                id: '',
            }
        },
        mounted() {
            console.log(this.id)
            // this.loadData()
        },
        activated() {
            // this.loadData()
        },
        methods: {
            loadData() {
                shipPlanSummary(this.id).then(res => {
                    this.form = res.data
                    console.log(res)
                })
                shipPlanTradeTypeReport(this.id).then(response => {
                    this.tradeType = response.data
                })
                shipPlanTransferReport(this.id).then(response => {
                    this.transfer = response.data
                })
                shipPlanShipAgentReport(this.id).then(response => {
                    this.shipAgent = response.data
                })
                if (this.un) {
                    shipPlanEnchaseWay(this.id).then(res => {
                        this.enchaseWay = res.data
                    })
                }
            },
            getSummary(params) {
                const { columns, data } = params
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value)) && column.property === 'cargoCount') {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' ';
                    } else {
                        sums[index] = '';
                    }
                });
                return sums;
            },
            handlePrint(status) {
                if (status == 'ONE' || status == 'TWO'){
                    this.$message({
                        message: '该船没有理箱完成,请在平板上点击"理完"',
                        type: 'warning'
                    })
                    return
                }
                localStorage.setItem('tps',JSON.stringify(this.fromPage))
                const origin = window.location.origin + window.location.pathname
                const route = "#/TotalPrint/"
                window.open(`${origin}${route}${this.id}`);
            },
            handleNewPrint(status) {
                if (status == 'ONE' || status == 'TWO'){
                    this.$message({
                        message: '该船没有理箱完成,请在平板上点击"理完"',
                        type: 'warning'
                    })
                    return
                }
                localStorage.setItem('tps',JSON.stringify(this.fromPage))
                const origin = window.location.origin + window.location.pathname
                const route = "#/newTotalPrint/"
                window.open(`${origin}${route}${this.id}`);
            },
            dealiceound() {
                sessionStorage.setItem('closeId', this.form.shipPlanNo)
                this.$router.push({
                    path: '/work/shipPlan/close',
                    name: '外理封航',
                })
            },
        }
    }
</script>

<style scoped>

</style>
